<template>
  <Form
    ref="customerForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    :label-width="100"
    inline>
    <Row>
      <Col :md="8" :lg="5">
        <FormItem prop="ctime" label="创建日期：">
          <DatePicker v-model="form.ctime" type="date" placeholder="请选择"></DatePicker>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="uname" label="客户姓名：">
          <Input type="text" v-model="form.uname" placeholder="请输入客户姓名" />
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="tel" label="客户电话：">
          <Input type="text" v-model="form.tel" placeholder="请输入客户电话" />
        </FormItem>
      </Col>
      <!-- <Col :md="8" :lg="4">
        <FormItem prop="mname" label="推荐销售：">
          <Select v-model="form.mname">
            <Option value="all">
              全部
            </Option>
            <Option v-for="item in nameList" :value="item.id" :key="item.id">
              {{ item.uname }}
            </Option>
          </Select>
        </FormItem>
      </Col> -->
      <Col :md="8" :lg="5" style="text-align: right">
        <FormItem>
          <Button @click="handleSubmit" icon="md-search" type="primary">
            搜索
          </Button>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col :md="8" :lg="5" v-if="title === '客户管理预约客户'">
        <FormItem prop="appointime" label="预约日期：">
          <DatePicker v-model="form.appointime" type="date" placeholder="请选择预约日期"></DatePicker>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5" v-if="title === '客户管理预约客户'">
        <FormItem prop="state" label="状态：">
          <Select v-model="form.state">
            <Option value="all">
              全部
            </Option>
            <Option value="1">
              已预约
            </Option>
            <Option value="2">
              未到访
            </Option>
          </Select>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col :md="8" :lg="5" v-if="title === '客户管理到店客户'">
        <FormItem prop="comdate" label="到店日期：">
          <DatePicker v-model="form.comdate" type="date" placeholder="请选择到店日期"></DatePicker>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5" v-if="title === '客户管理到店客户'">
        <FormItem prop="state" label="状态：" >
          <Select v-model="form.state">
            <Option value="all">
              全部
            </Option>
            <Option value="3">
              已到店
            </Option>
            <Option value="4">
              已签约
            </Option>
            <Option value="5">
              已退款
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5" v-if="title ==='客户管理流失客户'">
        <FormItem  prop="state" label="状态：">
          <Select v-model="form.state">
            <Option value="all">
              全部
            </Option>
            <Option value="0">
              未预约
            </Option>
            <Option value="1">
              已预约
            </Option>
            <Option value="2">
              未到访
            </Option>
            <Option value="3">
              已到店
            </Option>
            <!-- <Option value="4">
              已签约
            </Option> -->
            <Option value="5">
              已退款
            </Option>
          </Select>
        </FormItem>
      </Col>
    </Row>
    <!-- <FormItem prop="type" label="结算方式：" style="width: 250px">
      <Select v-model="form.type" clearable>
        <Option value="all">
          全部
        </Option>
        <Option value="0">
          口碑结算
        </Option>
        <Option value="1">
          到店结算
        </Option>
        <Option value="2">
          成交结算
        </Option>
        <Option value="4">
          销售素材
        </Option>
      </Select>
    </FormItem> -->
    <!-- <FormItem prop="state" label="开启方式：" style="width: 250px">
      <Select v-model="form.state" clearable>
        <Option value="all">
          全部
        </Option>
        <Option value="0">
          关闭
        </Option>
        <Option value="1">
          开启
        </Option>
      </Select>
    </FormItem> -->
  </Form>
</template>
<script>
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  name: 'CustomerForm',
  props: {
    title: '',
    statearr: '',
    paramsAppointime: '',
    ctimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    unameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    telRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      form: {
        ctime: '',
        uname: '',
        tel: '',
        mname: 'all',
        appointime: '',
        comdate: '',
        state: 'all'
      }
    }
  },
  computed: {
    ...mapState({
      interestedList: state => state.interested.interestedList,
      nameList: state => state.user.nameList,
      dataCount: state => state.interested.interestedDataCount,
      historyData: state => state.interested.interestedHistoryData,
      row: state => state.interested.row,
      pageSize: state => state.interested.interestedPageSize
    }),
    rules () {
      return {
        ctime: this.ctimeRules,
        uname: this.unameRules,
        tel: this.telRules,
        mname: this.nameRules,
        appointime: this.ctimeRules,
        comdate: this.ctimeRules,
        state: this.stateRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.customerForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            ctime: this.form.ctime ? this.$moment(this.form.ctime).format('YYYY-MM-DD') : '',
            uname: this.form.uname,
            tel: this.form.tel,
            muid: this.form.mname !== 'all' ? this.form.mname : '',
            appointime: this.form.appointime ? this.$moment(this.form.appointime).format('YYYY-MM-DD') : '',
            comdate: this.form.comdate ? this.$moment(this.form.comdate).format('YYYY-MM-DD') : '',
            state: this.form.state && this.form.state !== 'all' ? parseInt(this.form.state) : '',
            statearr: this.form.state === 'all' ? this.statearr : ''
          })
        }
      })
    }
  },
  mounted () {
    if (this.paramsAppointime) {
      this.form.appointime = this.paramsAppointime
    }
  }
}
</script>
